<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
      <h3>msg: {{msg}}</h3>
      <h3>person: {{person}}</h3>

      <button @click="updateMsg">更新基本类型值</button>
      <button @click="updateName">更新对象的属性(已有)</button>
      <br>
      <button @click="updateSex">更新对象的属性(直接添加)</button>
      <button @click="updateSex2">更新对象的属性(set方法添加)</button>
      <br>
      <button @click="deleteName">删除对象的属性(直接删除)</button>
      <button @click="deleteName2">删除对象的属性(delete方法添加)</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
        msg: 'abc',
        person: {id: 2, name: "tom", age: 12}
      },
      methods: {
        updateMsg() {
          this.msg = 'cba'
          /* 
          当修改vm上的msg属性值 => 触发vm上msg属性的setter执行, 它内部将最新值保存到data对象的msg上
          ===> 触发data的msg属性的setter调用, 内部去更新界面

          这个过程应用上了2个技术
            数据代理: vm上属性的setter
            数据劫持: data上属性的setter
          */
        },

        updateName () {
          // this.person = {id: 3, name:'bob', age: 34}  // person属性有setter
          this.person.name = 'Jack'  // person对象中的name也有setter
          /* 
          vue对data对象中所有层级的属性添加setter, 进行数据劫持/监视
          */
        },

        updateSex () {
          /* 
          给响应式对象添加新属性的问题:  界面不会自动更新
            直接添加的新属性不是响应式的
            新添加的属性没有setter监视   => setter只能监视属性值的改变, 不能监视添加
          */
          this.person.sex = "男"
        },

        updateSex2 () {
          /* 
          如何让新添加的属性也是响应式, 并让界面自动更新?
          vue指代2个语法:
            Vue.set(obj, propName, value)
            vm.$set(obj, propName, value)
          内部实现:
            在添加属性时, 给属性加了setter
            立即更新界面/DOM
          */
          // Vue.set(this.person, 'sex', '女')
          // debugger
          this.$set(this.person, 'sex', '第三种')
        },
     
        deleteName () {
          delete this.person.name  // 界面不会自动更新
        },

        deleteName2 () {
          // Vue.delete(this.person, 'name')  // 界面会自动更新
          vm.$delete(this.person, 'name')  // 界面会自动更新
        }
      }
    })
    console.log(vm)
    console.log(vm.$data)
  </script>
</body>
</html>